<template>
	<div>
		<el-upload
			class="upload-demo"
			ref="upload"
			:headers="setHeaders"
			:action="baseURL + 'tbSysAttachment/upload'"
			:before-upload="beforeUpload"
			:on-preview="handlePreview"
			:on-change="handleChange"
			:on-progress="handleprogress"
			:on-success="handleSuccess"
			:on-error="handleError"
			:on-remove="handleRemove"
			:before-remove="beforeRemove"
			:file-list="fileList"
			:auto-upload="true"
			:multiple="multiple"
			:accept="accept"
		>
			<el-button size="small" type="primary" plain :disabled="disabled">{{ buttonTxt }}</el-button>
		</el-upload>
		<p v-show="accept" class="txt-explain">请上传{{ accept }}类型的文件。{{ otherExplain }}</p>
	</div>
</template>
<script>
export default {
	data() {
		return {
			setHeaders: { Authorization: sessionStorage.getItem('authorization') },
			// fileList: [],
			fileData: []
		};
	},
	props: {
		buttonTxt: {
			type: String,
			default: '选择文件'
		},
		multiple: {
			//文件多选
			type: Boolean,
			default: false
		},
		fileType: {
			//文件类型 0:全部  1：图片  2：视频  3：文本
			type: Number,
			default: 0
		},
		disabled: {
			type: Boolean,
			default: false
		},
		defaultValue: {
			// type: Array,
			default: () => []
		},
		otherExplain: {
			type: String,
			default: ''
		},
		accept: {
			type: String,
			default: ''
		}
	},
	computed: {
		fileList: {
			get: function() {
				if (this.defaultValue && this.defaultValue.length) {
					this.defaultValue.forEach(v => {
						this.$set(v, 'name', v.oldName);
					});
					return this.defaultValue;
				} else {
					return [];
				}
			},
			set: function(value) {}
		}
	},
	mounted() {
		if (this.accept == '') {
			if (this.fileType == 1) {
				this.accept = '.jpg,.jpeg,.png';
			} else if (this.fileType == 2) {
				this.accept = '.mp4,.WebM,.Ogg';
			} else if (this.fileType == 3) {
				this.accept = '.doc,.docx,.ppt,.pptx,.pdf,.xls,.xlsx';
			} else {
				this.accept = '';
			}
		}
	},
	methods: {
		// 文件上传成功时的钩子
		handleSuccess(res, file, fileList) {
			// console.log(fileList)
			if (this.disabled) return;
			if (res.code == 0) {
				if (this.multiple) {
					this.fileData.push(res.data[0]);
				} else {
					this.fileData = [];
					this.fileData.push(res.data[0]);
				}
				this.refreshData(fileList);
			} else {
				this.$message({
					message: res.msg,
					type: 'warning'
				});
			}
		},
		handleChange(file, fileList) {
			if (this.multiple) return;
			this.fileList = fileList.slice(-1);
		},
		// 上传文件之前的钩子
		beforeUpload(file) {
			let maxSize = 0.5 * 1024 * 1024;
			if (this.fileType == 1 && file.size > maxSize) {
				this.$message({
					message: '您上传的图片资源过大，会影响加载速度，建议控制在0.5M以内',
					type: 'warning'
				});
			}
		},
		// 文件上传时的钩子
		handleprogress(file) {},
		// 点击文件列表中已上传的文件时的钩子
		handlePreview(file) {},
		beforeRemove(file, fileList) {
			// return this.$confirm(`确定移除 ${file.name}？`);
		},
		// 文件列表移除文件时的钩子
		handleRemove(file, fileList) {
			this.refreshData(fileList);
		},
		handleError(err) {
			console.log(err);
			this.$message.error('上传失败，请重试');
		},
		//更新数据
		refreshData(fileList) {
			this.fileData = [];
			if (fileList.length) {
				fileList.forEach(v => {
					//判断是回显数据还是新上传数据
					if (v.hasOwnProperty('response')) {
						this.fileData.push(v.response.data[0]);
					} else {
						this.fileData.push(v);
					}
				});
			}
			this.$emit('e-fileData', this.fileData);
		}
	}
};
</script>
<style scoped lang="scss"></style>
